<template>
  <div class="home_styl">
    <!-- 最上方信息展示 -->
    <FrontTop ref="FrontTop"></FrontTop>
    <!-- 吸顶查询 -->
    <div
      class="front_search"
      :class="[isCeiling ? 'ceiling_styl' : '']"
    >
      <FrontSearch
        :isCeiling="isCeiling"
        ref="FrontSearch"
      ></FrontSearch>
    </div>
    <router-view></router-view>
    <!-- 右侧浮窗 -->
    <FrontRightFloat ref="FrontRightFloat"></FrontRightFloat>
    <!-- 底部展示组件 -->
    <FrontFoot ref="FrontFoot"></FrontFoot>
  </div>
</template>

<script>
import FrontTop from "@/views/home/Front-Top.vue";
import FrontSearch from "@/views/home/Front-Search.vue";
import FrontFoot from "@/views/home/Front-Foot.vue";
import FrontRightFloat from "@/views/home/Front-RightFloat.vue";

export default {
  components: {
    FrontTop,
    FrontSearch,
    FrontFoot,
    FrontRightFloat,
  },
  data() {
    return {
      isCeiling: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll); // 监听滚动事件
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll); //  离开页面清除（移除）滚轮滚动事件
  },
  methods: {
    handleScroll() {
      let scrollTop = document.documentElement.scrollTop; // 滚动条偏移量
    //   console.log('滚动距离', scrollTop);
      if (this.isCeiling) {
        if (scrollTop < 60) {
          this.isCeiling = false;
        }
        // console.log('为什么', scrollTop);
        return
      }
      this.isCeiling = scrollTop >= 160;
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";
.home_styl {
  .flex-y(center);
  min-width: 1200px;
  position: relative;
  .left_float {
    position: absolute;
    left: -92px;
    .left_item {
      .flex-y(center);
      .item_name {
        cursor: pointer;
      }
      .item_name_copy {
        color: @themeColor;
      }
    }
  }
  .left_flotcopy {
    position: fixed;
    top: 138px;
    z-index: 1001;
  }
  .front_search {
    position: relative;
    width: 100%;
    min-width: 1185px;
    border-bottom: 2px solid @themeColor;
    background-color: #ffffff;
    .back_styl {
      .flex-x();
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: 0;
      z-index: 1000;
      .img_styl1 {
        height: 100%;
      }
      .img_styl2 {
        height: 100%;
      }
    }
  }
  .ceiling_styl {
    position: sticky;
    top: 30px;
    z-index: 1000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    animation: moveDown 0.3s linear;
  }
  @keyframes moveDown {
    from {
      top: -80px;
    }
    to {
      top: 30px;
    }
  }
}
</style>
